@import "compass"

// Configuration
$smashing-direction: right !default
$smashing-max-width: 1200px !default
$smashing-min-width: 960px !default
$smashing-cushion: 2.5% !default
$smashing-devine: false !default

// Layout variables
$smashing-divine-proportion: $smashing-min-width / 1.62
$smashing-sidebar-width: 400px
$smashing-sidebar-width-divine: floor($smashing-min-width - $smashing-divine-proportion)
$smashing-negative-sidebar-width: -(ceil($smashing-sidebar-width))
$smashing-negative-sidebar-width-divine: -(ceil($smashing-sidebar-width-divine))

=smashing-layout
  +smashing-width
  +smashing-padding
  +smashing-content

// Sets a div's width to behave like the width of +smashing-layout
// Assumes an inner wrapping div .width
=smashing-width
  &
    width: 100%
  .width
    +pie-clearfix
    margin: 0 auto
    min-width: $smashing-min-width
    max-width: $smashing-max-width
    padding:
      right: $smashing-cushion
      left: $smashing-cushion

// Used only in +smashing-layout
=smashing-padding
  .padding
    +box-sizing(border-box)
    +pie-clearfix
    @if $smashing-devine
      padding-#{$smashing-direction}: $smashing-sidebar-width-divine
    @else
      padding-#{$smashing-direction}: $smashing-sidebar-width
    width: 100%

// Used only in +smashing-layout
=smashing-content
  .primary, .secondary
    +box-sizing(border-box)
    @if $smashing-direction == right
      +float-left
    @else
      +float-right
  .primary
    width: 100%
  .secondary
    @if $smashing-devine
      margin-#{$smashing-direction}: $smashing-negative-sidebar-width-divine
      width: $smashing-sidebar-width-divine
    @else
      margin-#{$smashing-direction}: $smashing-negative-sidebar-width
      width: $smashing-sidebar-width